<template>
  <div class="musichead">
    <div class="m-top">
      <div class="wrap clearfix bg">
        <MusicHeadNav />
        <MusicHeadInput />
      </div>
    </div>
 
  </div>
</template>

<script>
import MusicHeadInput from "./MusicHeadInput.vue";
import MusicHeadNav from "./MusicHeadNav.vue";
// import OptionNav from '../pages/OptionNav.vue'

export default {
  name: "MusicHead",
  data() {
    return {
      bg_flag: 1,
    };
  },
  components: {
    MusicHeadInput,
    MusicHeadNav,
    // OptionNav
  },
  watch: {
    "$route.path"() {
      if (this.$route.path == "/toplist") {
        this.bg_flag = 2;
      }
      switch (this.$route.path) {
        case "/toplist":
          this.bg_flag = 2;
          break;
        case "/":
          this.bg_flag = 1;
          break;

        default:
          break;
      }
    },
  },
};
</script>

<style scoped lang='less'>
.musichead {
  width: 100%;
  top: 0px;
  .m-top {
    box-sizing: border-box;
    height: 70px;
    background: #242424;
    border-bottom: 1px solid #000;
  }
}
.bg {
  background: #242424;
}
.m-subnav {
  width: 100%;
  height: 35px;
  background-color: #c20c0c;
  border-bottom: 1px solid #a40011;
  box-sizing: border-box;
}
.bg1 {
  background-color: #c20c0c;
}
.nav {
  float: left;
  padding-left: 180px;

  li {
    float: left;
    height: 34px;
    text-align: center;
    a {
      color: #fff;
      em {
        position: relative;
        display: inline-block;
        height: 20px;
        padding: 0 13px;
        margin: 7px 17px 0;
        border-radius: 20px;
        line-height: 21px;
      }
      .f-pr {
        padding: 0 15px 0 11px;
      }
    }
  }
}
.z-slt {
  background: #9b0909;
}
.f-pa {
  position: absolute;
  display: inline-block;
  width: 8px;
  height: 8px;
  top: 2px;
  background: url(../images/xiazai.png);
  background-size: 8px 8px;
}
</style>